<template>
  <div class="case-receiver-config">
    <dt-search ref="search" :labelWidth="100" :xlBtn="4"></dt-search>
    <dt-grid ref="table" :page="page" :onFetch="onFetch">
      <template slot="btn">
        <Button
          type="primary"
          v-if="unlocking('0213090100')"
          @click="receiveCase({ type: 'add' })"
          style="margin-right: 8px">
          添加案场
        </Button>
      </template>
    </dt-grid>
    <case-receiver ref="caseReceiver" @success="onSuccess" />
    <case-callIn-config ref="caseCallInConfig" @success="onSuccess" @setReceiver="onSetReceiver" />
    <add-receiver ref="addReceiver" @success="onSuccess" />
  </div>
</template>

<script>
  import columnOpt from './biz/column.js'
  import searchOpt from './biz/search.js'
  import apiMgr from '@/biz/caseReceiver/index'
  import caseReceiver from './components/caseReceiver.vue'
  import caseCallInConfig from './components/caseCallInConfig'
  import addReceiver from './components/addReceiver'
  export default {
    components: { caseReceiver, caseCallInConfig, addReceiver },
    data() {
      return {
        page: {
          current: 1
        }
      }
    },
    mounted() {
      this.$refs.table.init(this, new columnOpt(this))
      this.$refs.search.init(this.$refs.table, new searchOpt(this).options())
      this.$refs.table.fetch()
    },
    methods: {
      onSuccess() {
        this.$refs.table.fetch()
      },
      onSetReceiver(data) {
        this.onSuccess()
        this.acceptor(data)
      },
      // 列表数据
      onFetch(data, val) {
        return apiMgr.casePage({ ...data })
      },
      //配置案场
      receiveCase(data) {
        if (!data.type) {
          data.type = 'edit'
        }
        this.$refs.caseReceiver.show(data)
      },
      //配置案场呼入号
      receiveCallIn(data) {
        this.$refs.caseCallInConfig.show(data)
      },
      //配置承接人
      acceptor(data) {
        this.$refs.addReceiver.show(data)
      },
      //承接人详情
      acceptorDetail(data) {
        this.$router.push({
          path: '/clueManage/caseBusiness/caseReceiver',
          query: {
            type: 'caseReceiver',
            parentPath: '/clueManage/caseBusiness/caseReceiverConfig',
            buildingId: data.buildingId
          }
        })
      },
      //导出案场承接人
      exportAcceptor(data) {
        if (!data.adviserCount) {
          return this.$Message.error('请先配置承接人')
        }
        apiMgr.exportOfCaseReceiver({ buildingId: data.buildingId })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .case-receiver-config {
    padding: 20px;
  }
</style>
